<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
    <title>TO DO LIST</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='http://fonts.font.im/css?family=Poiret+One|Lobster|Amatic+SC' rel='stylesheet' type='text/css'>

    <link href="statics/material.css" rel="stylesheet">
    <link href="statics/index.css" rel="stylesheet">
    <script src="statics/material.js"></script>
    <script src="statics/jquery.js"></script>
    <script src="statics/index.js"></script>
</head>
<body>
<div class="container">
    <h1 class="typography-display-3 my-text-red">TO DO LIST</h1>
    <div id="msg_div" class="msg my-text-red">I'm message</div>
    <div class="row">
        <div class="col">
        </div>
        <div class="col-8">
            <div class="card my-bg-primary-light shadow-lg">
                <div class="card-body">

                    <div class="form-group">
                        <div class="input-group">
                            <input aria-describedby="exampleIconInput8Help" class="form-control"
                                   id="todo_input" placeholder="Write a to do item" type="text">
                            <span class="input-group-icon" id="exampleIconInput8Help">
      <i class="material-icons">event</i>
    </span>
                        </div>
                    </div>
                    <table id="todo_table" class="table mb-0 bg-transparent table-borderless">
                        <tbody>

                        </tbody>
                    </table>
                    <div id="todo_bottom" class="card-bottom">
                        <span id="left_items_span" class="align-self-center mb-1 mx-1 text-muted text-left">Left items: 0</span>
                        <div>
                            <button id="all_btn" class="btn btn-flat chosen" type="button">All</button>
                            <button id="active_btn" class="btn btn-flat unchosen" type="button">Active</button>
                            <button id="complete_btn" class="btn btn-flat unchosen" type="button">Completed</button>
                        </div>
                        <a id="clear_complete_btn" class="align-self-center mb-1 mx-1 text-muted text-right" href="#">Clear Completed</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
        </div>
    </div>
</div>
</body>
</html>